<template>
  <div id="mapContainer">

  </div>
</template>

<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import {loadModules} from 'esri-loader';
import Camera from "@arcgis/core/Camera";
import Ground from "@arcgis/core/Ground";
import ElevationLayer from "@arcgis/core/layers/ElevationLayer";
import SceneLayer from "@arcgis/core/layers/SceneLayer";
import IntegratedMeshLayer from "@arcgis/core/layers/IntegratedMeshLayer";
import SceneView from "@arcgis/core/views/SceneView";
import LayerList from "@arcgis/core/widgets/LayerList";
import Point from "@arcgis/core/geometry/Point";
import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
  export default {
    data() {
      return {
        view:null,
        graphicsLayer: {},
      }
    },
    mounted(){
      this.initMap()
    },
    methods:{
      // 创建地图示例对象
      initMap(){
        const map = new Map({
          basemap: "hybrid",
          ground: {
            layers: [ new ElevationLayer({
              url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
            })]
          }
        });
        const meshLayer = new IntegratedMeshLayer({
          url: "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer/layers/0",
          copyright: "Aerowest GmbH",
          title: "Integrated Mesh Frankfurt"
        });

        const color = [235, 171, 52];
        const poiLayer = new SceneLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Frankfurt_POIs/SceneServer",
          title: "Points of interest",
          renderer: {
            type: "simple",
            symbol: {
              type: "point-3d", // autocasts as new PointSymbol3D()
              symbolLayers: [
                {
                  type: "icon", // autocasts as new IconSymbol3DLayer()
                  resource: {
                    primitive: "circle"
                  },
                  size: 10,
                  material: {
                    color: color
                  },
                  outline: {
                    color: "white",
                    size: 1
                  }
                }
              ],

              verticalOffset: {
                screenLength: 40,
                maxWorldLength: 200,
                minWorldLength: 35
              },

              callout: {
                type: "line", // autocasts as new LineCallout3D()
                color: color,
                size: 1,
                border: {
                  color: "white"
                }
              }
            }
          },
          elevationInfo: {
            // elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
            mode: "relative-to-scene"
          },
          screenSizePerspectiveEnabled: false,
          labelingInfo: [
            {
              labelExpressionInfo: {
                value: "{name}"
              },
              symbol: {
                type: "label-3d",
                symbolLayers: [
                  {
                    type: "text",
                    material: {
                      color: color
                    },
                    // we set a halo on the font to make the labels more visible with any kind of background
                    halo: {
                      size: 1,
                      color: "white"
                    },
                    size: 10
                  }
                ]
              }
            }
          ]
        })

        map.addMany([meshLayer, poiLayer]);
        const view = new SceneView({
          map:map,
          zoom: 9,
        //经度纬度
          center: [118.767413, 32.041544],
          container: "mapContainer",
          viewingMode: "local",
          // clippingArea: nanjingExtent
        })
        const layerList = new LayerList({
          view: view
        });
        view.ui.add(layerList, "top-right");

        // var graphicLayer = new GraphicsLayer();
        // map.addLayer(graphicLayer);
        // var symbol = new PictureMarkerSymbol("https://img1.baidu.com/it/u=1670214688,1888102973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", 32, 32);
        // var attr = { "address": "天津xxxxxxxx" };
        // var infoTemplate = new InfoTemplate("位置信息", "地址:${address}");
        // var point = new Point(118.767413, 32.041544);
        // var graphic = new graphic(point, symbol, attr, infoTemplate);
        // graphicLayer.add(graphic);


        view.constraints={
          minScale: 5000 ,// User cannot zoom out beyond a scale of 1:5000
          maxScale: 0 ,// User can overzoom tiles
          rotationEnabled: false// Disables map rotation
        };
        const cam = new Camera({
          heading: 90, // face due east
          tilt: 45, // looking from a bird's eye view
          position: {
            latitude: 118.767413,
            longitude: 32.041544,
            z: 2000,
          },
          spatialReference: {
            wkid: 4547
          }

        });
        // view.camera = cam;
        view.goTo(cam)
      },
      addPoint(){
        const point=new Point({
            longitude:111,
            latitude:222,
            // spatialReference: this.map.spatialReference
          });
          var symbol = {
          type: 'picture-marker',
          url: 'https://img1.baidu.com/it/u=1670214688,1888102973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          width: 35,
          height: 35
        }
        var positionGraphic = new Graphic({
          geometry: point,
          symbol: symbol,
          // attributes: {
          //   data
          // }
        })
        var textSymbol = {
          type: 'text',
          color: '#48b1f8',
          horizontalAlignment: 'center',
          verticalAlignment: 'middle',
          yoffset: -25,
          text: '111',
          font: {
            size: 10
          }
        }
        var textGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol,
          // attributes: {
          //   data
          // }
        })
        let graphicsLayer = new GraphicsLayer()
        this.graphicsLayer = graphicsLayer
        this.graphicsLayer.add(positionGraphic)
        this.graphicsLayer.add(textGraphic)
      },

      // 给地图添加点标记
      // addTextSymbol(){
      //   const textSymbol = {
      //     type: "text", // autocasts as new TextSymbol()
      //     color: "#7A003C",
      //     text: "\ue61d", // esri-icon-map-pin
      //     font: {
      //       // autocasts as new Font()
      //       size: 36,
      //       family: "CalciteWebCoreIcons" // Esri Icon Font
      //     }
      //   };

      // }
    },
  }
</script>


<style lang="scss" scoped>
#mapContainer {
  width: 800px;
  height: 500px;
}
</style>